<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 300px;
				height: 300px;
			}
			#dog{
				margin-right: 100px;
			}
			#cat{
				margin-left: 50px;
			}
			div{
				width: 400px;
				height: 150px;
			}
			#box1{
				background: purple;
				margin-bottom: 100px;
			}
			#box2{
				background: orange;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		
		<!--左右外边距累加，上下外边距合并（取最大值）-->
		
		<div id="box1"></div>
		<div id="box2"></div>
		
		<br /><br /><br /><br />
		
		<img src="dog.jpg" id="dog" /><img src="cat.jpg" id="cat" />
		
		
		
	</body>
</html>
